<!-- 页面  -->
<template>
  <s-layout title="闲置专区" :bgStyle="{ color: '#f2f2f2' }">

    <view class="sousuo-box">
      <uni-easyinput prefixIcon="search" v-model="state.search_value" placeholder="搜索"
        @iconClick="searchBtn" @confirm="searchBtn">
      </uni-easyinput>
    </view>

    <view class="sort-box" @click="btn_popup">
      <!-- <view class="sort-title">
        商品
      </view> -->
      <view class="sort-text">
        <view class="sort-text-child">
          <span style="margin-left: 300px;">智能排序</span>
        </view>
        <uni-icons type="down" size="30"></uni-icons>
      </view>
    </view>
    <view class="ss-p-20 block-box">
      <view v-for="item in state.pagination.data" :key="item.id" class="ss-m-b-20 block-box-card" style="width: 100%;">
       
          <s-score-card size="sz" :data="item" priceColor="#FF3000"></s-score-card>
       
      </view>
    </view>
    <!-- 弹窗 -->
    <view class="model-box" v-if="state.show || false" @click="state.show = false" id="sort-model-box">
      <view class="content-box" @click="show_btn">
        <!-- <view class="sort-box">
          <view class="sort-title">
            商品
          </view>
          <view class="sort-text">
            <view class="">
              排序
            </view>
            <uni-icons type="down" size="30"></uni-icons>
          </view>
        </view> -->
        <view class="sort-list" v-for="(item, index) in state.sortList" :key="index" @click="paixu(item)" >
          {{ item }}
        </view>
      </view>
    </view>
    <s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png" text="暂无转让商品"></s-empty>
    <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
      contentdown: '上拉加载更多',
    }" @tap="loadmore" />
  </s-layout>
</template>
<script setup>
import { UniIcons } from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive, watch } from 'vue';
import _ from 'lodash';

const state = reactive({
  sortList: ["价格最优"],
  show: false,
  pagination: {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  },
  loadStatus: '',
});

function paixu(item) {
  if (item !== "价格最优") return;
  state.pagination.data.sort((a, b) => +a.price - +b.price);
}

function show_btn(event) {
  event.stopPropagation();
};

function btn_popup(event) {
  event.stopPropagation();
  state.show = !state.show;
}

//搜索
function searchBtn() {
  state.pagination.data = [];
  getData(1, 5, state.search_value);
}

async function getData(page = 1, list_rows = 100,keywords = "") {
  state.loadStatus = 'loading';
  let is_transfer=1;
  let res = await sheep.$api.goods.list({
    list_rows,
    page,
    keywords,
	is_transfer
  });
  if (res.code === 1) {
	let couponlist = _.concat(state.pagination.data, res.data.data);
	state.pagination = {
	  ...res.data,
	  data: couponlist,
	};
    if (state.pagination.current_page < state.pagination.last_page) {
      state.loadStatus = 'more';
    } else {
      state.loadStatus = 'noMore';
    }
  }
}
// 加载更多
function loadmore() {
  if (state.loadStatus !== 'noMore') {
    getData(state.pagination.current_page + 1);
  }
}

// 上拉加载更多
onReachBottom(() => {
  loadmore();
});
onLoad(async () => {
 await getData(1);
});

</script>

<style scoped>
.block-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
}

.block-box-card {
  flex: 0 0 48%;
}
.sort-text-child .sort-text-child{
	  margin-top: 20px;
	 
	 
}
.sort-box {
  display: flex;
  justify-content: space-around;
  line-height: 160%;
  align-items: center;
}

.sort-text {
  display: flex;
  align-items: center;
}

.model-box {
  margin-top: 91px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.content-box {
  background-color: #fff;
  z-index: 2000;
  height: 30%;
}

.sort-list {
  text-align: center;
  line-height: 300%;
  
}

.sousuo-box {
  padding: 20rpx 20rpx 0 20rpx;
}

.sousuo-box /deep/.is-input-border {
  border-radius: 18.5px;
  background-color: #fff;
}
</style>
